<template>
	<view class="wap_list_content">
		<view class="list_box">
			
			<view class="list_title display_flex_center">
				播放列表
				<view class="list_close display_flex_center" @click="closePlayList">
					<u-icon name="close" size="22"></u-icon>
				</view>
			</view>
			
			<scroll-view :scroll-into-view="'song_list_'+nowPlaySong.id" scroll-y class="list_scroll-view" @scrolltolower="playListToBootom">
				
				
				<view v-for="(item, index) in nowPlaySongList" :key="item.id" :id="'song_list_'+item.id"  :class="'song_item display_flex_seart text_overflow_ellipsis '+(item.id == nowPlaySong.id?'active':'')" @click="songItemClick(item)">
					
					<!-- <image class="song_item_vip" src="/static/vip.png" mode="widthFix"></image> -->
					<text class="list_song_title">{{item.name}}</text>
					·
					<text class="song_auther">{{item.author}}</text>
					<image class="song_play_zhu" src="/static/play-zhu.png" mode="widthFix"></image>
				</view>
				
			</scroll-view>	
			
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "x-play-list",
		data() {
			return {

			};
		},
		computed:{
			...mapState(['nowPlaySongList',"nowPlaySong"])
		},
		methods:{
			...mapMutations(['setShowPlayList',"setNowPlaySong","addNowPlaySongListOffset","moreNowPlaySongList"]),
			closePlayList(){
				this.setShowPlayList(false);
			},
			songItemClick(item){
				this.setNowPlaySong(item);
				this.$emit("songItemClick");
			},
			
			playListToBootom(){
				this.addNowPlaySongListOffset();
				this.moreNowPlaySongList();
			},
		}
	}
</script>

<style>
	.wap_list_content {
		width: 100%;
		max-width: 650px;
		height: 100%;
		position: fixed;
		inset: 0;
		margin: auto;
		z-index: 9999999;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}
	.list_box{
		width: 100%;
		height: 74vh;
		border-radius: 40rpx 40rpx 0 0;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.list_title{
		width: 100%;
		height: 100rpx;
		position: relative;
		font-size: 32rpx;
		font-weight: bold;
	}
	.list_close{
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.list_scroll-view{
		width: 100%;
		box-sizing: border-box;
		height: calc(74vh - 100rpx);
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.song_item{
		width: 100%;
		height: 80rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
	}
	.song_item_vip{
		width: 30rpx;
	}
	.list_song_title{
		font-size: 32rpx;
		margin: 0 10rpx;
	}
	.song_auther{
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #999;
	}
	.song_play_zhu{
		width: 36rpx;
		margin-left: 20rpx;
		display: none;
	}
	.song_item.active{
		background-color: #F9F9F9 !important;
		color: red !important;
	}
	.song_item.active .song_play_zhu{
		display: block !important;
	}
	.song_item.active .song_auther,.song_item.active .list_song_title{
		color: red !important;
	}
</style>